<template>
	<view class="habitItem">
		<view class="item top">
			<view class="title">每天坚持跑步</view>
			<view class="desc">不能改变自己，和咸鱼有什么区别？不能改变自己，和咸鱼有什么区别？不能改变自己，和咸鱼有什么区别？</view>
		</view>
		<view class="item bottom">
			<view class="tItem">
				<view>时间段</view>
				<text class="num">早晨</text>
			</view>
			<view class="tItem">
				<view>目标天数</view>
				<text class="num">15<text class="word">天</text></text>
			</view>
			<view class="tItem">
				<view>使用人数</view>
				<text class="num">1234<text class="word">人</text></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
			}
		},
		props: {
		},
		methods:{
		},
		filters: {

		}
	}
</script>

<style scoped>
	/* 习惯 */
	.habitItem {
		width: 100%;
		height: 260upx;
		border-radius:8upx;
		box-shadow:0upx 4upx 8upx rgba(0,0,0,0.06);
		margin-bottom: 20upx;
	}
	.habitItem .item {
		height: 50%;
		width: 100%;
		padding: 20upx 20upx 30upx 20upx;
		box-sizing: border-box;
	}
	.habitItem .top {
		color: #FFFFFF;
		background:#FF9900;
		display: flex;
		flex-direction: column;
		border-radius:8upx 8upx 0 0;
	}
	.habitItem .top .title {
		font-size: 32upx;
		font-weight:500;
		line-height: 1.2;
	}
	.habitItem .top .desc {
		font-size: 28upx;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.habitItem .bottom {
		display: flex;
		justify-content: space-around;
	}
	.habitItem .bottom .tItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		font-size: 24upx;
		color: #999999;
		line-height: 1.2;
	}
	.habitItem .bottom  .num {
		font-size: 40upx;
		color: #333333;
		font-weight:500;
	}
	.habitItem .bottom .word {
		font-size: 24upx;
		color: #999999;
	}
</style>
